<template>
  <div id="login">
    <!--主要内容大盒子开始-->
    <div class="content_login">
      <!--盒子左边开始-->
      <div class="content_left">
        <p>欢迎使用</p>
        <div>
          <img src="../assets/img/zxwy.jpg" />
          <div>智学无忧商城后台登录</div>
        </div>
      </div>
      <!--盒子左边结束-->

      <!--盒子右边开始-->
      <div class="content_rigit">
        <p>登录</p>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item prop="name">
            <i class="el-icon-user"></i>
            <el-input
              placeholder="请输入用户名"
              v-model="ruleForm.name"
            ></el-input>
          </el-form-item>
          <el-form-item prop="pwd">
            <i class="el-icon-key"></i>
            <el-input
              type="password"
              placeholder="请输入密码"
              v-model="ruleForm.pwd"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <i class="el-icon-position"></i>
            <el-input class="authcode" v-model="ruleForm.code"></el-input>
            <el-button class="code_button" plain @click="open4"
              >验证码</el-button
            >
          </el-form-item>
          <!--是否记住密码开始-->
          <el-checkbox
            label="记住密码"
            name="type"
            v-model="checkeds"
            @change="checked"
          ></el-checkbox>
          <!--是否记住密码结束-->
          <br />

          <!--登录按钮开始-->
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            class="login_button"
            >登录</el-button
          >
          <!--登录按钮结束-->
        </el-form>
        <div>开发者:李嘉鑫</div>
      </div>
      <!--盒子右边结束-->
    </div>
  </div>
  <!--主要内容大盒子结束-->
</template>

<script>
import login from "../api/login";
import Cookie from "js-cookie";
import base from "../util/Base64"; //引入Base64用于加密解密
export default {
  data() {
    //用户名验证
    var username = (rule, value, callback) => {
      var user = /^[a-zA-Z]\w{3,15}$/; //用户名的正则表达式  4-16个数字或字母
      if (value === "") {
        //非空验证
        callback(new Error("请输入用户名"));
      } else if (!user.test(value)) {
        //如果value不满足正则的条件的话
        callback(new Error("请输入4-16个数字或字母"));
      } else {
        callback();
      }
    };
    //密码验证
    var validatePass = (rule, value, callback) => {
      var pwds = /^(\w){5,19}$/; //密码的正则表达式 6-20个字母、数字、下划线
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (!pwds.test(value)) {
        callback(new Error("请输入6-20个字母、数字、下划线"));
      } else {
        callback();
      }
    };
    return {
      checkeds: false, //是否选中记住密码
      ruleForm: {
        name: "", //用户名
        pwd: "", //密码
        code: "66666" //验证码
      },
      rules: {
        pwd: [{ validator: validatePass, trigger: "blur" }], //如果密码验证是正确的就给蓝色
        name: [{ validator: username, trigger: "blur" }] //如果用户名验证是正确的就给蓝色
      }
    };
  },
  created() {
    if (Cookie.get("username") !== undefined) {
      //解密
      this.ruleForm.name = base.decode(Cookie.get("username")); //将存储的信息赋值给name
      this.ruleForm.pwd = base.decode(Cookie.get("userpwd")); //将存储的信息赋值给pwd
      this.checkeds = true; //将记住密码打钩
    }
  },
  methods: {
    //是否记住密码
    checked() {
      if (this.checkeds == false) {
        //如果没有记住密码就清空用户名和密码
        Cookie.remove("username"); //清除用户名
        Cookie.remove("userpwd"); //清除密码
      }
    },
    //弹框  如果用户名或者密码等于空的话就弹出
    open4() {
      if (this.ruleForm.name == "" || this.ruleForm.pwd == "") {
        if (document.getElementsByClassName("el-notification").length === 0) {
          this.$notify.error({
            title: "失败",
            message: "请先填写用户名和密码"
          });
        }
      }
    },
    //登录
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          var _this = this; //指定this指向
          login.login(_this.ruleForm).then(function(res) {
            if (res.data.errmsg == "成功") {
              login.info().then(res => {
                //获取权限
                console.log(res);
                Cookie.set("perms", res.data.data.perms); //权限
              });
              if (document.getElementsByClassName("el-message").length === 0) {
                _this.$message({
                  message: "登录成功",
                  type: "success",
                  duration: "700"
                });
              }
              _this.Prosperity.Messages("登录成功", "success");
              if (_this.checkeds == true) {
                //如果记住密码的话存储用户名和密码
                Cookie.set("username", base.encode(_this.ruleForm.name)); //将用户名存储
                Cookie.set("userpwd", base.encode(_this.ruleForm.pwd)); //将密码存储
              }
              let Time = new Date(new Date().getTime() + 60 * 1000 * 20); //设置时间
              Cookie.set("token", res.data.data, { expires: Time }); //将令牌存储 并设定过期时间
              console.log(_this.$route.query.returnUrl);
              if (_this.$route.query.returnUrl) {
                _this.$router.push({
                  path: _this.$route.query.returnUrl //returnUrl是从main.js传过来的参数
                });
              } else {
                //否则执行跳转到首页
                _this.$router.push({
                  path: "/Home"
                });
              }
            } else {
              if (document.getElementsByClassName("el-message").length === 0) {
                _this.$message.error(res.data.errmsg);
              }
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style scoped="scoped">
/*媒体查询*/
@media screen and (max-width: 1005px) {
  .content_login {
    width: 100% !important;
  }
  .content_rigit > p {
    width: 100% !important;
  }
  .content_rigit > div {
    width: 100% !important;
  }
}
@media screen and (max-width: 600px) {
  .content_login {
    width: 100% !important;
  }
  .content_left {
    display: none !important;
    margin: auto !important;
  }
  .content_rigit {
    width: 100% !important;
    margin: auto !important;
    height: 100% !important;
  }
  .content_rigit > p {
    width: 100% !important;
  }
}
/*媒体查询结束*/

/*最大盒子*/
#login {
  display: flex;
  background: url(../assets/img/cloud.jpg) 0 bottom repeat-x #049ec4;
  width: 100%;
  height: 100%;
}
.content_login {
  display: flex;
  width: 1000px;
  height: 500px;
  margin: auto;
  box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
}
/*最大盒子结束*/

/*左边盒子*/
.content_left {
  width: 500px;
  background: #409eff;
  display: flex;
  position: relative;
}
.content_left > p {
  top: 7px;
  left: 30px;
  height: 25px;
  font-size: 18px;
  color: #fff;
  font-weight: 100;
  position: absolute;
}
.content_left > div > img {
  width: 100px;
  height: 100px;
  margin-bottom: 60px;
}
.content_left > div {
  margin: auto;
  font-size: 25px;
  color: #fff;
  letter-spacing: 3px;
}
/*左边盒子结束*/

/*右边盒子*/
.el-form {
  /* margin: top; */
}

.el-input__inner {
  padding: 0px 15px;
  border: 0px;
  border-bottom: 1px solid #dcdfe6;
  font-size: 13px;
  border-radius: 0px;
  background: transparent;
  height: 32px;
}
.content_rigit {
  width: 500px;
  background: #f5f7fa;
  display: flex;
  position: relative;
}

.el-form-item--feedback/deep/.el-form-item__content {
  display: flex !important;
  line-height: 45px;
  justify-content: space-between !important;
}

.el-form-item__content > i {
  margin: auto 0px;
}
.authcode > .el-input__inner {
  width: 155px !important;
  margin-left: 21px !important;
}
.content_rigit > p {
  margin-top: 60px;
  position: absolute;
  text-align: center;
  width: 500px;
  font-size: 22px;
  letter-spacing: 15px;
}
.formitem {
  display: flex;
}
.content_rigit > div {
  position: absolute;
  width: 500px;
  bottom: 6%;
  color: #999;
  font-size: 12px;
}
.el-checkbox {
  width: 100%;
  text-align: left;
  margin-bottom: 40px;
  margin-top: 7px;
  left: 105px;
}
.el-input__suffix {
  left: 255px;
}
.el-form-item {
  margin-bottom: 15px;
}
.el-form-item__error {
  left: 35px;
}
.login_button {
  font-size: 18px;
  font-weight: 100;
  padding: 9px 15px;
  height: 45px;
  width: 293px;
  border: 1px solid #409eff;
  color: #409eff;
  cursor: pointer;
  letter-spacing: 4px;
  background: #f5f7fa;
  margin-left: 100px;
}
.code_button {
  border: 0px;
  font-size: 12px;
  color: #909399;
  letter-spacing: 1px;
}
.el-form-item__content > .el-button.code_button {
  background: #faf7fa;
  color: #909399;
}
.el-form {
  margin-top: 135px;
}
/*右边盒子结束*/
</style>
